<template>
  <view class="login-page">
    <view class="header">
      <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
      <view class="title">樱桃商城</view>
      <view class="subtitle">每一颗樱桃都是甜蜜的味道</view>
    </view>
    
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="input-group">
        <view class="input-label">+86</view>
        <input 
          class="input" 
          type="number" 
          placeholder="请输入手机号"
          maxlength="11"
          v-model="phone"
        />
      </view>
      
      <!-- 验证码输入 -->
      <view class="input-group">
        <input 
          class="input" 
          type="number" 
          placeholder="请输入验证码"
          maxlength="6"
          v-model="code"
        />
        <view class="code-btn" :class="{ disabled: !canSendCode }" @click="sendCode">
          {{ codeBtnText }}
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-btn" @click="login">登录</view>
      
      <!-- 隐私政策 -->
      <view class="privacy-policy">
        <checkbox :checked="agreePolicy" @click="agreePolicy = !agreePolicy" color="#e5394d" />
        <text class="policy-text">我已阅读并同意 <text class="policy-link" @click="showPrivacyPolicy">《用户协议》</text>和<text class="policy-link" @click="showPrivacyPolicy">《隐私政策》</text></text>
      </view>
    </view>
    
    <!-- 分割线 -->
    <view class="divider">
      <view class="line"></view>
      <view class="text">其他登录方式</view>
      <view class="line"></view>
    </view>
    
    <!-- 第三方登录 -->
    <view class="third-party-login">
      <view class="third-party-item" @click="wxLogin">
        <image class="icon" src="/static/images/icons/wechat.png"></image>
        <text class="text">微信登录</text>
      </view>
    </view>
    
    <!-- 游客模式 -->
    <view class="guest-login" @click="guestLogin">
      暂不登录，先逛逛
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex';
import userApi from '@/api/user.js';
import '@/styles/pages/login/index.scss';

export default {
  data() {
    return {
      phone: '',
      code: '',
      agreePolicy: false,
      countdown: 0,
      timer: null
    };
  },
  computed: {
    canSendCode() {
      return this.phone.length === 11 && this.countdown === 0;
    },
    codeBtnText() {
      return this.countdown > 0 ? `${this.countdown}秒后重发` : '获取验证码';
    }
  },
  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    ...mapActions('user', ['login']),
    
    // 发送验证码
    sendCode() {
      if (!this.canSendCode) {
        return;
      }
      
      // 手机号格式验证
      if (!/^1\d{10}$/.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 发送验证码
      uni.showLoading({
        title: '发送中'
      });
      
      userApi.sendSmsCode(this.phone)
        .then(() => {
          uni.hideLoading();
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          });
          
          // 开始倒计时
          this.countdown = 60;
          this.timer = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        })
        .catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: error.message || '发送失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 手机号登录
    login() {
      // 验证表单
      if (!/^1\d{10}$/.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return;
      }
      
      if (!this.agreePolicy) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '登录中'
      });
      
      // 调用登录接口
      const loginData = {
        type: 'phone',
        phone: this.phone,
        code: this.code
      };
      
      userApi.loginByPhone(loginData)
        .then(res => {
          // 更新Vuex状态
          this.login(res);
          
          uni.hideLoading();
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 延迟返回，让用户看到成功提示
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: error.message || '登录失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 微信登录
    wxLogin() {
      if (!this.agreePolicy) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '登录中'
      });
      
      // #ifdef MP-WEIXIN
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 获取微信登录code
          const code = loginRes.code;
          
          // 调用登录接口
          userApi.loginByWeixin({ wxCode: code })
            .then(res => {
              // 更新Vuex状态
              this.login(res);
              
              uni.hideLoading();
              uni.showToast({
                title: '登录成功',
                icon: 'success'
              });
              
              // 延迟返回，让用户看到成功提示
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            })
            .catch(error => {
              uni.hideLoading();
              uni.showToast({
                title: error.message || '登录失败，请重试',
                icon: 'none'
              });
            });
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: '微信登录失败，请重试',
            icon: 'none'
          });
        }
      });
      // #endif
      
      // #ifndef MP-WEIXIN
      uni.hideLoading();
      uni.showToast({
        title: '非微信环境，不支持微信登录',
        icon: 'none'
      });
      // #endif
    },
    
    // 游客模式
    guestLogin() {
      uni.navigateBack();
    },
    
    // 查看隐私政策
    showPrivacyPolicy() {
      uni.showToast({
        title: '隐私政策功能暂未开放',
        icon: 'none'
      });
    }
  }
};
</script> 